<template>
    <div>
            <div class="banner" @click="handleBannerClick">
                    <img class="banner-img" :src="bannerImg" alt="">
                    <div class="banner-info">
                        <div class="banner-title">{{sightName}}</div>
                        <div class="banner-number"><span class="iconfont">&#xe67c;</span>{{gallaryImgs.length}}</div>
                    </div>
                </div>
                <fade><common-gallary :imgs="gallaryImgs" v-show="showGallary" @close="handleGallaryClick"></common-gallary></fade>
                
    </div>
</template>

<script>
    import CommonGallary from 'common/gallary/Gallary'
    import Fade from 'common/fade/Fade'
    export default {
        name: 'DetailBanner',
        props: {
            sightName: {
                type: String
            },
            bannerImg: String,
            gallaryImgs: Array
        },
        data() {
            return {
                imgs: [
                    'http://img1.qunarzz.com/sight/p0/1704/c9/c936f3fccfc6d7eda3.img.jpg_r_800x800_93bf62f1.jpg',
                    'http://img1.qunarzz.com/sight/p0/1703/22/2244eaab209bf750a3.img.jpg_r_800x800_d4d9e847.jpg'
                ],
                showGallary: false
            }
        },
        components: {
            CommonGallary,
            Fade
        },
        methods: {
            handleBannerClick() {
                this.showGallary = true;
            },
            handleGallaryClick() {
                this.showGallary = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .banner {
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-bottom: 55%;
        .banner-img {
            width: 100%;
        }
        .banner-info {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: .6rem;
            color: #fff;
            background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
            .banner-title {
                flex: 1;
                font-size: .32rem;
                padding: 0 .2rem;
            }
            .banner-number {
                height: .32rem;
                margin-top: .14rem;
                padding: 0 .4rem;
                line-height: .32rem;
                font-size: .24rem;
                border-radius: .2rem;
                background-color: rgba(0, 0, 0, .6)
            }
        }
    }
</style>